<template>
  <div>

<!--    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">-->
<!--      &lt;!&ndash; Indicators &ndash;&gt;-->
<!--      <ol class="carousel-indicators">-->
<!--        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>-->
<!--        <li data-target="#carousel-example-generic" data-slide-to="1"></li>-->
<!--        <li data-target="#carousel-example-generic" data-slide-to="2"></li>-->
<!--      </ol>-->

<!--      &lt;!&ndash; Wrapper for slides &ndash;&gt;-->
<!--      <div class="carousel-inner" role="listbox">-->
<!--        <div class="item " v-for="banner,i in bannerList" :key="i" :class="i==0?'active':''">-->
<!--          <img :src="banner.imageUrl" :alt="banner.title" style="width: 100%;height: 300px">-->
<!--          <div class="carousel-caption">-->
<!--            ...-->
<!--          </div>-->
<!--        </div>-->


<!--      </div>-->

<!--      &lt;!&ndash; Controls &ndash;&gt;-->
<!--      <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">-->
<!--        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>-->
<!--        <span class="sr-only">Previous</span>-->
<!--      </a>-->
<!--      <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">-->
<!--        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>-->
<!--        <span class="sr-only">Next</span>-->
<!--      </a>-->
<!--    </div>-->


    <el-carousel :interval="4000" type="card" height="400px">
      <el-carousel-item v-for="banner,i in bannerList" :key="item">
        <h3 class="medium" style="position: relative">
          <a :href="banner.linkUrl"><img :src="banner.imageUrl" :alt="banner.title" style="width: 100%;height: 300px"></a>
          <h1 style="position: absolute;top: 30%;left: 30%;color: navajowhite">{{banner.title}}</h1>
        </h3>
      </el-carousel-item>
    </el-carousel>


    <div class="container">
      <!-- 课程内容 -->
      <h2>热门课程</h2>
      <div>
        <div class="hot-course" v-for="course in courseList">
          <div  style="overflow: hidden">
            <a :href="'http://localhost:8080/#/courseDetail/'+course.id"><img :src="course.cover" style="width: 100%;height: 200px;" @mouseover="$event.currentTarget.className='enlargeImg'"
                                                                              @mouseout="$event.currentTarget.className='narrowImg'"></a>
          </div>
          <p style="height: 40px"><a :href="'http://localhost:8080/#/courseDetail/'+course.id">{{course.title}}</a></p>
          <p v-if="course.price==0" style="color: green">免费</p>
          <p v-else style="color: red">￥{{course.price}}</p>
        </div>


        <h2>专业讲师</h2>
        <div class="new-course" v-for="teacher in teacherList" style="overflow: hidden">
          <p>
            <a :href="'http://localhost:8080/#/teacherDetail/'+teacher.id"><img :src="teacher.avatar" style="width: 120px;height: 120px;border-radius: 50%"></a>
          </p>
          <a :href="'http://localhost:8080/#/teacherDetail/'+teacher.id"><p >{{teacher.name}}</p></a>
          <p>{{teacher.career}}</p>

        </div>

      </div>


    </div>


  </div>

</template>

<script>


  import banner from '../api/banner'

  console.log($)
  export default {
    name: "Main",
    data(){
      return{
        bannerList:[],//轮播图
        courseList:[],//课程
        teacherList:[],//讲师
        enlargeImg:false//图片放大

      }
    },
    methods:{
      //首页轮播图
      getListBanner(){
        banner.getIndexBanner()
          .then(response=>{
            this.bannerList = response.data
          })
      },
      //获取首页课程和讲师数据
      getCourseTeacher(){
        banner.getCourseTeacher()
          .then(response=>{
            this.courseList = response.data.courseList
            this.teacherList = response.data.teacherList
          })
      },



    },
    created() {
      //轮播图
      this.getListBanner()
      //课程讲师
      this.getCourseTeacher()

    },


  }



</script>

<style scoped>
  .hot-course{
    width: 350px;
    height: 300px;
    border: 1px solid red;
    display: inline-block;
    margin-right: 30px;
    margin-top: 10px;
    text-align: center;
  }

  .new-course{
    width: 250px;
    height: 200px;
    border: 1px solid blue;
    display: inline-block;
    margin-right: 30px;
    margin-top: 10px;
    text-align: center;
  }

  .enlargeImg{
    transition: all 0.3s;
    transform: scale(1.2);
  }
  .narrowImg{
    transition: all 0.3s;
    transform: scale(1);
  }

</style>
